<template>
  <!--查询-->
  <el-form>
    <el-form-item>
      <el-select v-model="province" placeholder="请选择地点">
        <el-option label="请选择" value=""></el-option>
        <el-option
          v-for="item in findProvincesLists"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select v-model="saveFarm.type" placeholder="请选择基地类型">
        <el-option label="请选择" value=""></el-option>
        <el-option
          v-for="item in farmTypeList"
          :key="item.id"
          :label="item.typename"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-button type="info" @click="farm">查询</el-button>
    <el-button type="info" @click="addLot">添加</el-button>
  </el-form>

  <!--列表-->
  <el-table :data="tableData.records">
    <el-table-column prop="province" label="省份" />
    <el-table-column prop="city" label="城市" />
    <el-table-column prop="district" label="区县" />
    <el-table-column prop="name" label="基地名称" />
    <el-table-column prop="typename" label="基地类型" />
    <el-table-column prop="linkman" label="基地负责人" />
    <el-table-column prop="remark" label="详情" />
    <el-table-column fixed="right" label="编辑">
      <template #default="scope">
        <el-button
          type="primary"
          size="small"
          @click="alertFarmValue(scope.row)"
        >
          修改
        </el-button>
        <el-button type="danger" size="small" @click="deleteLot(scope.row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--分页-->
  <div>
    <el-pagination
      :current-page="tableData.currents"
      :page-size="tableData.size"
      :page-sizes="[5, 10, 20, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <!--添加-->
  <el-dialog v-model="dialogVisible" title="添加/修改">
    <span>
      <el-form v-model="saveFarm" style="width: 80%">
        <el-form-item>
          请选择省份：
          <el-select
            v-model="saveFarm.provinceCode"
            placeholder="请选择省份"
            @change="findCitys"
          >
            <el-option label="" value=""></el-option>
            <el-option
              v-for="item in findProvincesLists"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          请选择市区：
          <el-select
            v-model="saveFarm.cityCode"
            placeholder="请选择市区"
            @change="findDistrict"
          >
            <el-option label="" value=""></el-option>
            <el-option
              v-for="item in findCityLists"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          请选择县区：
          <el-select v-model="saveFarm.countyCode" placeholder="请选择县区">
            <el-option label="" value=""></el-option>
            <el-option
              v-for="item in findDistrictLists"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="saveFarm.name"
            placeholder="请输入基地名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="saveFarm.type" placeholder="请选择基地类型">
            <el-option label="请选择" value=""></el-option>
            <el-option
              v-for="item in farmTypeList"
              :key="item.id"
              :label="item.typename"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="saveFarm.linkman"
            placeholder="请输入基地负责人"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="saveFarm.telephone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="saveFarm.remark"
            type="textarea"
            placeholder="详细信息"
          ></el-input>
        </el-form-item>
        <!--        <el-form-item label="用户头像">-->
        <!--               <el-upload-->
        <!--                   class="avatar-uploader"-->
        <!--                   action="http://localhost:8500/internet-base/admin/system/fileUpload"-->
        <!--                   :show-file-list="false"-->
        <!--                   :on-success="handleAvatarSuccess"-->
        <!--                   :headers="headers"-->
        <!--               >-->
        <!--                  <img v-if="findProvinceByIdList.img" :src="findProvinceByIdList.img" class="avatar" style="width: 230px; height: 150px"/>-->
        <!--                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>-->
        <!--                </el-upload>-->
        <!--            </el-form-item>-->
      </el-form>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveLot">提交</el-button>
      </div>
    </template>
  </el-dialog>

  <!--修改-->
  <div>
    <el-dialog v-model="dialog" title="修改">
      <span>
        <el-form v-model="saveFarm" style="width: 80%">
          <el-form-item>
            请选择省份：
            <el-select
              v-model="saveFarm.provinceCode"
              placeholder="请选择省份"
              @change="findCitys"
            >
              <el-option label="" value=""></el-option>
              <el-option
                v-for="item in findProvincesLists"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            请选择市区：
            <el-select
              v-model="saveFarm.cityCode"
              placeholder="请选择市区"
              @change="findDistrict"
            >
              <el-option label="" value=""></el-option>
              <el-option
                v-for="item in findCityLists"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            请选择县区：
            <el-select v-model="saveFarm.countyCode" placeholder="请选择县区">
              <el-option label="" value=""></el-option>
              <el-option
                v-for="item in findDistrictLists"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="saveFarm.typename" placeholder="请选择基地类型">
              <el-option label="请选择" value=""></el-option>
              <el-option
                v-for="item in farmTypeList"
                :key="item.id"
                :label="item.typename"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="saveFarm.name"
              placeholder="请输入基地名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="saveFarm.linkman"
              placeholder="请输入基地负责人"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="saveFarm.telephone"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="saveFarm.remark"
              type="textarea"
              placeholder="详细信息"
            ></el-input>
          </el-form-item>
          <!--       <el-upload-->
          <!--           class="avatar-uploader"-->
          <!--           action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"-->
          <!--           :show-file-list="false"-->
          <!--           :on-success="handleAvatarSuccess"-->
          <!--           :before-upload="beforeAvatarUpload"-->
          <!--       >-->
          <!--    <img v-if="imageUrl" :src="imageUrl" class="avatar"/>-->
          <!--    <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>-->
          <!--        </el-upload>-->
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialog = false">取消</el-button>
          <el-button type="primary" @click="upLot">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  allFarmTypes,
  cityList,
  countyList,
  deleteFarmValue,
  farmList,
  provinceList,
  putFarmValue,
  saveFarmValue,
} from '@/api/farm'
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// 基地列表
const tableData = ref()
const farmTypeList = ref([])
// 分页
const offsets = ref(1)
const pageSizes = ref(5)
const province = ref()
const provinceName = ref('')
// 基地所有地点接口
const findProvinceLists = ref()
//新增的dto对象
const saveFarm = ref({
  provinceCode: '',
  cityCode: '',
  countyCode: '',
  name: '',
  linkman: '',
  telephone: '',
  remark: '',
  type: '',
  typename: '',
})

// 修改查询单个
const findProvinceByIdList = ref({
  id: '',
  province: '',
  city: '',
  district: '',
  name: '',
  linkman: '',
  telephone: '',
  img: '',
})
// dialog
const dialogVisible = ref(false)
const dialog = ref(false)
// 查找所有省份
const findProvincesLists = ref()
// 查询所属省份的市
const findCityLists = ref([])
// 查询所属市区的县
const findDistrictLists = ref()

// const imageUrl = ref('')
//
// const headers = {
//   // 从pinia中获取token，在进行文件上传的时候将token设置到请求头中
//   token: useApp().authorization.token
// }

// 图像上传成功以后的事件处理函数
// const handleAvatarSuccess = (response, uploadFile) => {
//   form.value.headimgurl = response.data
// }
// 分页
function handleSizeChange(val) {
  console.log(`${val} items per page`)
  pageSizes.value = val
  farm()
}

// 分页
function handleCurrentChange(val) {
  offsets.value = val
  farm()
  console.log(`current page: ${val}`)
}

//添加
function saveLot() {
  console.log(saveFarm.value)
  saveFarmValue(saveFarm.value).then(res => {
    if (res.code === 200) {
      farm()
      dialogVisible.value = false
      saveFarm.value = {}
      ElMessage.success(res.message)
    } else {
      ElMessage.error('新增失败！')
    }
  })
}

//基地类型
function findFarmTypeList() {
  allFarmTypes().then(res => {
    farmTypeList.value = res.data
  })
}

// 基地列表
function farm() {
  farmList(
    offsets.value,
    pageSizes.value,
    province.value,
    saveFarm.value.type
  ).then(res => {
    tableData.value = res.data
    console.log(res.data)
  })
}

// 所有城市列表
function findProvinceList() {
  console.log('搜索框的城市集合')
  cityList(province.value).then(res => {
    console.log(res.data)
    findProvinceLists.value = res.data
  })
}

// 添加打开dialog
function addLot() {
  saveFarm.value = {}
  dialogVisible.value = true
}

//修改的dialog
function alertFarmValue(data) {
  console.log(data)
  saveFarm.value = data
  saveFarm.value.provinceCode = data.province
  saveFarm.value.cityCode = data.city
  saveFarm.value.countyCode = data.district
  saveFarm.value.typename = data.typename
  console.log(saveFarm.value)
  dialog.value = true
}

//修改
function upLot() {
  saveFarm.value.type = saveFarm.value.typename
  console.log(saveFarm.value)
  putFarmValue(saveFarm.value).then(res => {
    if (res.code === 200) {
      ElMessage.success(res.message)
      saveFarm.value = {}
      dialog.value = false
      farm()
    } else {
      ElMessage.error('修改失败！')
    }
  })
}

// 删除单个
function deleteLot(id) {
  deleteFarmValue(id).then(res => {
    if (res.code === 200) {
      ElMessage.success('删除成功')
      farm()
    } else {
      ElMessage.error('删除失败')
    }
  })
}

// 查找所有省份
function findProvincess() {
  findProvincesLists.value = []
  findCityLists.value = []
  findDistrictLists.value = []
  saveFarm.value = {}
  provinceList().then(res => {
    findProvincesLists.value = res.data
    console.log('所有省份-----', findProvincesLists.value)
  })
}

// 级联查询改变市区列表
function findCitys() {
  findCityLists.value = []
  findDistrictLists.value = []
  saveFarm.value.cityCode = ''
  saveFarm.value.countyCode = ''
  cityList(saveFarm.value.provinceCode).then(res => {
    findCityLists.value = res.data
  })
}

// 级联查询改变市区县列表
function findDistrict() {
  findDistrictLists.value = []
  countyList(saveFarm.value.cityCode).then(res => {
    findDistrictLists.value = res.data
  })
}

findProvinceList('')
farm()
findProvincess()
findFarmTypeList()
</script>

<style scoped></style>
